<template>
	<view class="form-wrap">

		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" :labelWidth="labelWidth"
			:disabled="disabled">
			<div v-for="(item, index) in inputlist" :key="index">
				<slot name="jsonForms" :item="item" :data="formData" @change="change" v-if="item.type == 'jsonForms'">
				</slot>
				<formselect v-else-if="item.type == 'select'" :item="item" :data="formData" @change="change"
					v-model="formData[item.value]">
				</formselect>
				<zswitch v-else-if="item.type == 'switch'" :item="item" :data="formData" @change="change"
					v-model="formData[item.value]">
				</zswitch>
				<selectProps v-else-if="item.type == 'selectProps'" :item="item" :data="formData" @change="change"
					v-model="formData[item.value]">
				</selectProps>
				<deptid v-else-if="item.type == 'tree'" :item="item" :data="formData" v-model="formData[item.value]"
					@change="change">
				</deptid>
				<dictSelect v-else-if="item.type == 'dictSelect'" :item="item" :data="formData" @change="change"
					v-model="formData[item.value]">
				</dictSelect>

				<!-- <FormCreate  v-else-if="item.type == 'jsonForms'"
          :item="item"
          :data="formData"
          @change="change"
          v-model="formData[item.value]"></FormCreate> -->

				<!-- <view class="tag" v-else-if="item.type == 'tag'">
          {{ item.label }}
        </view> -->
				<levelType v-else-if="item.type == 'levelType'" :item="item" :data="formData"
					v-model="formData[item.value]" @change="change">
				</levelType>
				<datetime v-else-if="item.type == 'datetime'" :item="item" :data="formData"
					v-model="formData[item.value]">
				</datetime>
				<calendar v-else-if="item._fc_drag_tag == 'dateRange'" :item="item" :data="formData"
					v-model="formData[item.value]">
				</calendar>
				<datePicker v-else-if="item._fc_drag_tag == 'datePicker'" :item="item" :data="formData"
					v-model="formData[item.value]">
				</datePicker>
				<province v-else-if="item.type == 'province'" :item="item" :data="formData"
					v-model="formData[item.value]" @change="change">
				</province>
				<sourceLocation v-else-if="item.type == 'sourceLocation'" :item="item" :data="formData"
					v-model="formData[item.value]" @change="change">
				</sourceLocation>

				<file v-else-if="item.type == 'file'" :item="item" :data="formData" v-model="formData[item.value]">
				</file>
				<forminput v-else :item="item" :data="formData" v-model="formData[item.value]"></forminput>
			</div>
		</u--form>
	</view>
</template>

<script>
	import forminput from "./components/forminput.vue";
	import formselect from "./components/formselect.vue";
	import zswitch from "./components/zswitch.vue";
	import datetime from "./components/datetime.vue";
	import qs from "qs";
	import deptid from "./components/deptId.vue";
	import file from "./components/file.vue";
	// import month from "./components/month.vue"
	import selectProps from "./components/selectProps.vue";
	import dictSelect from "./components/dictSelect.vue";
	import levelType from "./components/levelType.vue"
	import province from "./components/province.vue";
	import sourceLocation from "./components/sourceLocation.vue";
	import calendar from "./components/calendar.vue"
	import datePicker from "./components/datePicker.vue";
	// import FormCreate from "./components/FormCreate.vue";
	// datetime.vue
	export default {
		name: "formz",
		components: {
			province,
			forminput,
			formselect,
			zswitch,
			selectProps,
			datetime,
			deptid,
			dictSelect,
			sourceLocation,
			file,
			levelType,
			calendar,
			datePicker
			// month
		},
		props: {
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			inputs: {
				typeof: Array,
				default: () => {
					return [];
				},
			},
			setdefaultValuefalg: {
				typeof: Boolean,
				default: false,
			},
			labelWidth: {
				typeof: String,
				default: "200rpx",
			},
			disabled: {
				typeof: Boolean,
				default: false,
			},
		},
		computed: {
			inputlist() {
				return this.inputs || [];
			},
			rules() {
				let r = {};
				if (!this.inputlist || Object.keys(this.formData).length == 0) {
					return {};
				}
				this.inputlist.forEach((e) => {
					let rules = e.rules || e.rule || false;

					if (rules) {
						r[e.value] = rules.map((e) => {
							if (e.pattern) {
								e.pattern = new RegExp(e.pattern)
							}

							e.trigger = ['blur', 'change']
							return e;
						});
					} else if (e.required) {
						r[e.value] = [{
							required: true,
							message: "请输入" + e.label,
							trigger: "blur",
						}, ];
					} else if (e.type == "yzm") {
						r[e.value] = [{
							required: true,
							message: "请输入" + e.label,
							trigger: "blur",
						}, ];
					}
				});
				return r;
			},
		},
		watch: {
			inputlist: {
				handler(n, o) {
					if (!n || n.length == 0) {
						return [];
					}
					o = o || [];

					const isEqual = (obj1, obj2) =>
						qs.stringify(obj1) === qs.stringify(obj2);
					let edtinputso = new Set([
						...o.filter((e) => !n.some((f) => isEqual(e, f))),
					]);

					let edtinputs = new Set([
						...n.filter((e) => !o.some((f) => isEqual(e, f))),
					]);

					if (
						!this.setdefaultValuefalg &&
						this.data && Object.keys(this.data).length != 0 &&
						qs.stringify(this.formData) == qs.stringify(this.data)
					) {
						return;
					}

					if (
						!(
							Object.keys(this.data).length != 0 &&
							qs.stringify(this.formData) == qs.stringify(this.data)
						)
					) {
						edtinputso.forEach((e) => {
							delete this.formData[e.prop];
						});
					}
					if (
						Object.keys(this.data).length != 0 &&
						qs.stringify(this.formData) == qs.stringify(this.data)
					) {
						edtinputs.forEach((e) => {
							if (!e.value) {
								return;
							}
							if (!Object.keys(this.formData).includes(e.value)) {
								// state.formData[e.value] = "";

								this.$set(this.formData, e.value, "");
							}
							if (this.formData[e.value] || this.formData[e.value] == "0") {} else if (e
								.defaultValue) {
								this.$set(this.formData, e.value, e.defaultValue);
								// this.formData[e.value] = e.defaultValue;
							}
						});
					} else {
						edtinputs.forEach((e) => {
							if (!e.value) {
								return;
							}

							if (!Object.keys(this.formData).includes(e.value)) {
								// this.formData[e.value] = "";
								this.$set(this.formData, e.value, "");
							}
							if (
								e.defaultValue ||
								e.defaultValue == "0" ||
								e.defaultValue == ""
							) {
								this.$set(this.formData, e.value, e.defaultValue);
							}
						});
					}
				},
				deep: true,
				immediate: true,
			},
			data: {
				handler(n, o) {
					for (let key in this.data) {
						this.$set(
							this.formData,
							key,
							this.data[key] == null ? "" : this.data[key]
						);
					}
					// this.formData = this.$u.deepClone(this.data);
				},
				immediate: true,
			},
			// rules: {

			// },
			formData: {
				handler() {

					this.$emit("change", this.formData);
				},
				deep: true,

			}
		},
		data() {
			return {
				inputFlag: true,
				formData: {},
			};
		},
		methods: {
			change(data = {}) {
				this.formData = {
					...this.formData,
					...data,
				};
			},

			async validate(e) {
				await this.$refs.uForm.validate();
				return this.formData;
			},
		},
		mounted() {
			// setTimeout(() => {
			//   // this.formData.type = "1";
			//   console.log(123456);
			// }, 1000);
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules);
		},
	};
</script>
<style scoped lang="scss">
	.tag {
		height: 60rpx;
		background-color: #f4f4f5;
		color: #909399;
		line-height: 60rpx;
		font-size: 24rpx;
		padding-left: 20rpx;
		// margin-bottom: 20rpx;
		// margin-top: -30rpx;
		border-radius: 6rpx;
	}
</style>